 //获取操作对象
 var pagin = document.querySelector('.pagination');
 //创建需要传递的数据信息
 //  var ol = {
 //      //数据信息
 //      pageInfo: {
 //          //定义当前默认页
 //          pagenum: 1,
 //          pagesize: 7,//显示的页码数
 //          totalsize: 138,//总页码数
 //          totalpage: 20 //总页数
 //      },
 //      //文本信息
 //      textInfo: {
 //          first: '首页',
 //          previous: '上一页',
 //          next: '下一页',
 //          last: '尾页'
 //      }
 //  }

 //创建分页器的构造函数  - 第一个参数是操作的对象 第二个参数是创建好的数据信息  第三个参数是new调用的构造函数(实例化对象)
 function Pagination(ele, obj, cb) {
     //把传入的参数赋值给实例属性
     this.ele = ele
     this.obj = obj || {}
     this.cb = cb || function () {}
     // console.log(this.cb)  //p

     //设置默认数据信息
     this.default = {
         pageInfo: {
             pagenum: 1,
             pagesize: 9,
             totalsize: 100,
             totalpage: 12
         },
         textInfo: {
             first: 'first',
             previous: 'pervious',
             list: '',
             next: 'next',
             last: 'last'
         }

     }
     //创建实例属性，存放页码的盒子
     this.list = null
     //调用方法
     this.init()
 }
 //将事件放入一个方法
 Pagination.prototype.init = function () {
     //方法调用
     this.updateDefault()
     this.show1()
     this.bigBox()
 }
 //替换默认数据信息方法
 Pagination.prototype.updateDefault = function () {
     //获取传入参数中没有pageInfo(数据信息)和textInfo(文本信息)
     var pageInfo2 = this.obj.pageInfo
     var textInfo2 = this.obj.textInfo
     // 判断数据信息
     if (pageInfo2) {
         //遍历数据信息对象中所有数据
         for (let key in pageInfo2) {
             // 替换默认数据信息
             this.default.pageInfo[key] = pageInfo2[key]
         }
     }
     // 判断文本信息是否传入
     if (textInfo2) {
         for (let key in textInfo2) {
             this.default.textInfo[key] = textInfo2[key]
         }
     }
 }
 //信息显示方法
 Pagination.prototype.show1 = function () {
     // 每点击一次清除一下数据、文本信息
     this.ele.innerHTML = ''
     this.showText()
     this.showBtn()
     this.showP()
     this.disabled()
     //调用回调函数，并传递当前页码
     this.cb(this.default.pageInfo.pagenum)
 }
 //显示文本信息方法
 Pagination.prototype.showText = function () {
     // 获取默认参数中的文本内容
     let text1 = this.default.textInfo
     // 遍历当前对象所有内容
     for (let key in text1) {
         //创建div存放文本信息
         var div1 = document.createElement('div')
         // 添加内容
         div1.className = key
         // 判断当前key是否等于list
         if (key == "list") {
             this.list = div1
             // 调用方法，给当前div设置样式
             styleCss(div1, {
                 "display": "flex",
                 "justify-content": "center",
                 "align-items": "center"
             })
         } else {
             styleCss(div1, {
                 "border": "1px solid #d2d2d2",
                 "margin": "0px 5px",
                 "padding": "4px 12px",
                 "background-color": "#fff",
                 "color": "#666"
             })
             //给div添加内容
             div1.innerHTML = text1[key]
         }
         // 将div插入大盒子中
         this.ele.appendChild(div1)
     }
 }
 // 按钮方法
 Pagination.prototype.showBtn = function () {
     // 获取当前页码
     var pagenum = this.default.pageInfo.pagenum
     //创建输入框对象
     var input = document.createElement('input')
     //  设置输入框样式
     styleCss(input, {
         "width": "50px",
         "height": "24px",
         "text-align": "center",
         "margin-right": "10px",
         "outline": "none"
     })
     //添加内容
     input.value = pagenum
     //设置边框大小
     input.size = 1
     //创建按钮对象
     var btn = document.createElement('button')
     // 设置go按钮样式
     styleCss(btn, {
         "width": "50px",
         "padding": "5px 12px",
         "background-color": "#fff",
         "border": "1px solid #d2d2d2"
     })
     btn.innerHTML = 'Go'
     //把创建好的输入框和按钮插入大盒子
     this.ele.appendChild(input)
     this.ele.appendChild(btn)
 }
 //显示页码方法
 Pagination.prototype.showP = function () {
     // 获取默认参数数据信息
     var pageInfo = this.default.pageInfo
     // 获取当前显示的页码，以及总页数
     var pagenum = pageInfo.pagenum

     var totalpage = pageInfo.totalpage
     //判断总页数是否小于10
     if (totalpage < 10) {
         for (var i = 1; i < totalpage; i++) {
             //创建页码
             var p = createP(i, pagenum)
             // 把当前页码插入到div的list中
             this.list.appendChild(p)
         }
     } else {
         //判断当前页码是否小于5
         if (pagenum < 5) {
             //前5页
             for (var i = 1; i <= 5; i++) {
                 var p = createP(i, pagenum)
                 //把当前页码插入div.list
                 this.list.appendChild(p)
             }
             // 中间... 创建span标签接收
             var span = document.createElement('span')
             //添加内容
             span.innerHTML = '...'
             this.list.appendChild(span)
             //最后两页
             for (var a = totalpage - 1; a <= totalpage; a++) {
                 var p = createP(a, pagenum)
                 //把当前页码插入div.list
                 this.list.appendChild(p)
             }
         } else if (pagenum === 5) {
             // 前面7页
             for (var i = 1; i <= 7; i++) {
                 var p = createP(i, pagenum)
                 //把当前页码插入div.list
                 this.list.appendChild(p)
             }
             // 中间... 创建span标签接收
             var span = document.createElement('span')
             //添加内容
             span.innerHTML = '...'
             this.list.appendChild(span)
             //最后两页
             for (var a = totalpage - 1; a <= totalpage; a++) {
                 var p = createP(a, pagenum)
                 //把当前页码插入div.list
                 this.list.appendChild(p)
             }
         } else if (pagenum > 5 && pagenum < totalpage - 4) {
             // 前面2页
             for (var i = 1; i <= 2; i++) {
                 var p = createP(i, pagenum)
                 //把当前页码插入div.list
                 this.list.appendChild(p)
             }
             // 中间... 创建span标签接收
             var span = document.createElement('span')
             //添加内容
             span.innerHTML = '...'
             this.list.appendChild(span)
             //中间5页
             for (var b = pagenum - 2; b <= pagenum + 2; b++) {
                 var p = createP(b, pagenum)
                 //把当前页码插入div.list
                 this.list.appendChild(p)
             }
             // 创建span标签
             var span2 = document.createElement('span')
             //添加内容
             span2.innerHTML = '...'
             this.list.appendChild(span2)

             // 最后两页
             for (var a = totalpage - 1; a <= totalpage; a++) {
                 var p = createP(a, pagenum)
                 this.list.appendChild(p)
             }
         } else if (pagenum === totalpage - 4) {
             //前面2页
             for (var i = 1; i <= 2; i++) {
                 //创建页码
                 var p = createP(i, pagenum)
                 //把当前页码追加到div.list盒子中
                 this.list.appendChild(p)
             }
             //中间...
             //创建span标签
             var span = document.createElement('span')
             //添加内容
             span.innerHTML = "..."
             //把当前span标签追加到div盒子中
             this.list.appendChild(span)

             //最后两页
             for (var a = totalpage - 6; a <= totalpage; a++) {
                 //创建页码
                 var p = createP(a, pagenum)
                 //把当前页码追加到div.list盒子中
                 this.list.appendChild(p)
             }
         } else if (pagenum > totalpage - 4) {
             //前面2页
             for (var i = 1; i <= 2; i++) {
                 //创建页码
                 var p = createP(i, pagenum)
                 //把当前页码追加到div.list盒子中
                 this.list.appendChild(p)
             }
             //中间...
             //创建span标签
             var span = document.createElement('span')
             //添加内容
             span.innerHTML = "..."
             //把当前span标签追加到div盒子中
             this.list.appendChild(span)

             //最后两页
             for (var a = totalpage - 4; a <= totalpage; a++) {
                 //创建页码
                 var p = createP(a, pagenum)
                 //把当前页码追加到div.list盒子中
                 this.list.appendChild(p)
             }
         }
     }
 }
 //禁用按钮方法
 Pagination.prototype.disabled = function () {
     //获取当前页码和最大页码
     var pagenum = this.default.pageInfo.pagenum
     var totalpage = this.default.pageInfo.totalpage
     //获取大盒子中所有的div子元素盒子
     var divs = this.ele.children
     //判断当前页是否等于1
     if (pagenum === 1) {
         divs[0].style.backgroundColor = "#eee"
         divs[1].style.backgroundColor = "#eee"
     }
     //判断当前页码是否等于最大页码
     if (pagenum === totalpage) {
         divs[3].style.backgroundColor = "#eee"
         divs[4].style.backgroundColor = "#eee"
     }
 }
 //创建方法，给大盒子对象绑定点击事件
 Pagination.prototype.bigBox = function () {
     //获取当前页码
     var pagenum = this.default.pageInfo.pagenum
     //获取最大页码
     var totalpage = this.default.pageInfo.totalpage
     //给大盒子绑定点击事件
     this.ele.onclick = (e) => {
         //事件对象兼容
         var e = e || window.event
         //获取操作目标
         var tg = e.target || e.srcElement
         //下一页的判断
         if (tg.className == "next" && totalpage != pagenum) {
             //计算页码
             // pagenum=parseInt(pagenum)+1
             pagenum++
             //重新赋值给页码
             this.default.pageInfo.pagenum = pagenum
             //重新加载页面
             this.show1()
         }
         //上一页的判断
         if (tg.className == "previous" && pagenum != 1) {
             pagenum--
             //重新赋值给页码
             this.default.pageInfo.pagenum = pagenum
             //重新加载页面
             this.show1()
         }
         //尾页
         if (tg.className == "last" && totalpage != pagenum) {
             //把尾页赋值给当前页码
             pagenum = totalpage
             //重新赋值给当前页码
             this.default.pageInfo.pagenum = pagenum
             //重新加载页面
             this.show1()
         }
         //首页
         if (tg.className == 'first' && pagenum != 1) {
             pagenum = 1
             //重新赋值给当前页码
             this.default.pageInfo.pagenum = pagenum
             //重新加载页面
             this.show1()
         }
         //页码
         if (tg.nodeName == "P") {
             //获取当前p标签中的文本,并赋值给当前页码
             pagenum = parseInt(tg.innerHTML)
             //重新赋值给当前页码
             this.default.pageInfo.pagenum = pagenum
             //重新加载页面
             this.show1()
         }
         //GO按钮
         if (tg.innerHTML == "Go" && tg.previousElementSibling.value != pagenum) {
             //获取输入框中的内容
             var val = tg.previousElementSibling.value
             //判断是否在页码的范围
             if (val >= 1 && val <= totalpage) {
                 //把当前输入框中的内容赋值给pagenum
                 pagenum = parseInt(val)
                 //重新赋值给当前页码
                 this.default.pageInfo.pagenum = pagenum
                 //重新加载页面
                 this.show1()
             }
         }
     }
 }
 //创建一个设置页码的方法
 function createP(m, n) {
     //创建p标签对象
     var newp = document.createElement('p')
     //给p标签添加内容
     newp.innerHTML = m
     //给当前p标签对象设置样式
     styleCss(newp, {
         "border": '1px solid #d2d2d2',
         "margin": '0px 5px',
         "padding": "4px 12px",
         "backgroundColor": "#fff",
         "color": "#666"
     })
     //判断m等于n时，单独设置一个背景颜色
     if (m == n) {
         styleCss(newp, {
             "background-color": "#e50012",
             "color": "#fff",
         })
     }
     //把当前创建好的p标签返回给调用的位置
     return newp
 }
 //创建一个设置样式的普通函数
 function styleCss(ele, oo1) {
     //遍历对象中的键值对
     for (let key in oo1) {
         ele.style[key] = oo1[key]
         //ele.style['margin']="5px"
     }
 }
 //实例化对象
 //new调用
//  var p = new Pagination(pagin, ol, function (m) {
//      //  console.log(m)
//  })